<template>
  <div class="uni-slider uni-flex">
    <el-slider class="uni-el-slider" :marks="marks" :format-tooltip="formatTooltip" tooltip-class="uni-tooltip-Class" :min="0"	:max="trackList.length" v-model="valueTmp"></el-slider>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'LoraHlider',
    props: {
      trackList: {
        type: Array,
        default: () => {
          return []
        }
      },
      value: {
        type: Number,
        default: () => {
          return 0
        }
      }
    },
    data() {
      return {
        valueTmp: 0
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.valueTmp = this.value
      })
    },
    computed: {
      marks: {
        get() {
          var m = {}
          if(this.trackList.length < 11) {
            for(var i = 1; i<this.trackList.length; i++) {
              m[i] = moment(this.trackList.createDate).format("MM/DD HH:mm:ss")
            }
          } else {
            var group = Math.floor(this.trackList.length*0.1);
            for(var i = 0; i<10; i++) {
              if(i%2 === 1) {
                m[group*i] = moment(this.trackList[group*i].createDate).format("MM/DD HH:mm:ss")
              }
            }
          }
          return m
        }
      }
    },
    watch: {
      value(val) {
        if (this.valueTmp !== val) {
          this.valueTmp = val
        }
      },
      valueTmp(val) {
        this.$emit('input', val)
      }
    },
    methods: {
      formatTooltip(val) {
        if(val < this.trackList.length) {
          var track =  this.trackList[val]
          if(track) {
            return moment(track.createDate).format("MM/DD HH:mm:ss");
          }
        }
        return val
      }
    }
  }
</script>

<style lang="less">
  .uni-slider {
    .el-slider__runway {
      border-radius: 0;
      margin: 0;
      overflow-x: clip;
    }
    .el-slider__bar {
      border-radius: 0;
    }
  }
  .uni-tooltip-Class {
    background-color: #FF0000;
  }
</style>
<style scoped>
  .uni-slider {
    background-color: #E4E7ED;
    padding: 0;
    /* overflow-x: hidden; */
  }

  .uni-el-slider {
    width: 100%;
  }
</style>
